import styles from '@/pages/home/index.module.less';
import { Battery, Icon } from '@ray-js/smart-ui';
import { View, Text } from 'ray';
import clsx from 'clsx';
import React from 'react';
import { useProps } from '@ray-js/panel-sdk';
import Strings from '@/i18n';

interface IProps {
  battery: number;
  isOnline: boolean;
  power: boolean;
  onPowerToggle?: () => void;
}

export default function Header({ battery, isOnline, power, onPowerToggle }: IProps) {
  return (
    <View className={styles.header}>
      <Battery size={15} value={battery} type="horizontal" />
      <View className={styles.statusWarp}>
        <View
          className={clsx(styles.statusPanel, {
            [styles.statusPanelDisable]: !isOnline,
          })}
        >
          <View className={styles.statusBox}>
            <View>
              <View
                className={clsx(styles.powerOn, {
                  [styles.powerOff]: !power,
                })}
                onClick={onPowerToggle}
              >
                <Icon name={require('@/res/icons/power.svg')} color="red" size={18} />
              </View>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}
